<!DOCTYPE html>
<html>
<head>

<title>HTML Editor</title>

<script type='text/javascript'>
var old = '';

function update() {
	var docObj = window.frames['updateFrame'].document;
	var textarea = document.getElementById('HTMLEditBox');

	if(old != textarea.value) {
		old = textarea.value
		docObj.open('text/html', 'replace');
		docObj.write(old);
		docObj.close();
	}
	window.setTimeout(update, 150)
}
</script>

<style type="text/css">
body{
   position:relative;
   margin:0;
   padding:0;
   width:1007px;
   overflow-x:hidden;
}
#HTMLEditBox{
   display:block;
   width: 95%;
   margin:20px auto;
   border: dashed 1px #000000; 
   background: #EEEEEE;
   padding:20px;
   overflow:auto;
   height:300px;
}
#updateFrame {
   width: 95%;
   height: 30em;
   margin:0 auto 1em;
   padding:20px;
}
.regexNeedle {
width: 100%;
margin-left: auto;
margin-right: auto;
}
.regexHaystack {
width: 100%;
margin-left: auto;
margin-right: auto;
}
table.formLayout {
margin:0;
padding:0;
width:100%;
}
div.searchSpacer {
margin-bottom: 1em;
}
</style>

</head>

<body onload='document.getElementById("jsCheck").style.display="inline";document.getElementById("HTMLEditBox").select();update();'>

<!--HTML-Editor http://www.timsfreestuff.com/HTMLEditor/ -->

<div id="jsCheck" style="display: none;">
Enter HTML code into the text box and the frame below will update automatically as you type, as if you were looking at the actual website.

<h3>Enter HTML here</h3>
<textarea id="HTMLEditBox" name="ta" rows="10">

<h1><center>Real-Time HTML Editor</center></h1>

<p>Any HTML you type will be automatically shown here.</p>

<h2>Examples</h2>

<p>Example image</p>

<img src="https://lh4.googleusercontent.com/-CksBTuhWevc/UDK8y3tjxiE/AAAAAAAAAOE/HnUx5hzDVdg/s144-c/CSSCodeTutorialDemo.jpg" />

<p>Example table</p>
<table border="1">
   <th>Header 1</th>
   <th>Header 2</th>
<tr><td>Cell 1</td><td>Cell 2</td></tr>
</table>
</textarea>

<h3>Result</h3>

<iframe src="javascript:''" id="updateFrame" name="updateFrame">
<p>Sorry, your browser does not support the Real Time HTML editor. We recommend you upgrade your browser.</p>
</iframe>

</div>


</body>

</html>